<template>
  <div class="modal-overlay" @click="$emit('close')">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h2>隐私政策</h2>
        <button class="close-button" @click="$emit('close')">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <h3>1. 信息收集</h3>
        <p>我们会收集您提供的信息（如姓名、邮箱）和使用我们服务时自动生成的信息（如设备信息、日志）。</p>
        
        <h3>2. 信息使用</h3>
        <p>我们使用收集的信息来提供、维护和改进我们的服务，以及开发新服务。</p>
        
        <h3>3. 信息共享</h3>
        <p>除非获得您的同意，或法律要求，或为防止损害，否则我们不会与第三方共享您的个人信息。</p>
        
        <h3>4. 信息安全</h3>
        <p>我们采取合理措施保护您的信息不被未授权访问或披露。</p>
        
        <h3>5. 数据保留</h3>
        <p>我们会在需要提供服务或法律要求的期间保留您的信息。</p>
        
        <h3>6. 您的权利</h3>
        <p>您有权访问、更正、删除您的个人信息，以及反对或限制某些处理。</p>
        
        <h3>7. 政策变更</h3>
        <p>我们可能会更新本隐私政策，更新时会通过网站通知您。</p>
      </div>
      <div class="modal-footer">
        <button class="confirm-button" @click="$emit('close')">我已阅读并同意</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineEmits(['close']);
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: rgba(30, 30, 40, 0.95);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 20px rgba(134, 3, 174, 0.4);
  border: 1px solid rgba(134, 3, 174, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(134, 3, 174, 0.3);
}

.modal-header h2 {
  color: #c084fc;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
}

.modal-body {
  padding: 20px;
  color: rgba(255, 255, 255, 0.8);
}

.modal-body h3 {
  color: #a17fe0;
  margin-top: 20px;
  margin-bottom: 10px;
}

.modal-body p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.modal-footer {
  padding: 15px 20px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(134, 3, 174, 0.3);
}

.confirm-button {
  background: linear-gradient(135deg, #7c3aed, #a17fe0);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.confirm-button:hover {
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
  box-shadow: 0 0 15px rgba(134, 3, 174, 0.5);
}
</style>
